import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'
// 1. 定义路由组件.
// 也可以从其他文件导入
// import Home from '../views/Home.vue'
const Home =()=> import('../views/Home.vue')
// import About from '../views/About.vue'
const About =()=>import('../views/About.vue')
// import User from '../views/User.vue'
const User=()=>import('../views/User.vue')
// import NotFound from '../views/NotFound.vue'
const NotFound =()=>import('../views/NotFound.vue')
// import ShopTop from '../views/ShopTop.vue'
const ShopTop =()=>import('../views/ShopTop.vue')
// import ShopBody from '../views/ShopBody.vue'
const ShopBody =()=>import('../views/ShopBody.vue')
// import ShopFoot from '../views/ShopFoot.vue'
const ShopFoot =()=>import('../views/ShopFoot.vue')


// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', redirect:'/home' },
  {path:'/home',component:Home},
  {
    path: '/about',
    component: About,
    // 每路守卫(单个路由的路由守卫)
    beforeEach: (to, from) => {
      // 这里放各种验证逻辑代码
      if (123 != 123) {
        // 返回false就取消了本次导航
        return false
      }
    }
  },
  {
    path: '/user/:id',
    component: User,
    props:true
  },
  {
    path: '/shop', components: {
      default: ShopBody,
      ShopTop,
      ShopFoot
    }
  },
  {
    path: '/order',
    component: ShopBody,
    props:route=>({query:route.query.q})
  },
  // 使用正则表达式处理没有命中任何路由的情况：404页面，上下两种写法都可以
  {path:'/:path(.*)',component:NotFound}
  // { path: '/:pathMatch(.*)*', name: "notfound", component: NotFound },
  
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  // history: createWebHashHistory(),
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

// 全局守卫，进入任意路由都会触发
router.beforeEach((to, from) => {
  console.log(to);
  console.log(from); 
  if (1 == 2) {
    return false
  }
})

export default router